/**
 * 关联持仓
 * 2022-12-07
 */
import React from 'react';
import { connect } from 'dva';
import { TableC } from '../../../../comps';
import ViewModaC from './viewModaC';
class RelatedPositionC extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [], // 表格头
      dataSource: [], // 表格数据
      visible: false, // 查看模态框
      modalData: {}, // 模块框数据
      cpCode: [],
    };
  }

  componentDidMount() {
    // 根据产品获取产品下所有组合
    this.props.dispatch({
      type: 'productAGroupM/getProductGroup',
      payload: {
        rootId: this.props.rootId,
        tradeModel: ['BOOKKEEPING_MODE', 'COMMAND_MODE', 'VALUATION_BOOKKEEPING_MODEL'],
      },
      callback: (res) => {
        if (res) {
          let arr = [];
          this.findAllKey(res, arr);
          this.setState({ cpCode: arr });
        }
      },
    });
    this.getTableData(this.props.record);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.rootId != nextProps.rootId) {
      this.props.dispatch({
        type: 'productAGroupM/getProductGroup',
        payload: {
          rootId: this.props.rootId,
          tradeModel: ['BOOKKEEPING_MODE', 'COMMAND_MODE', 'VALUATION_BOOKKEEPING_MODEL'],
        },
        callback: (res) => {
          if (res) {
            let arr = [];
            this.findAllKey(res, arr);
            this.setState({ cpCode: arr });
          }
        },
      });
    }
    if (this.props.record.stockCode != nextProps.record.stockCode) {
      this.getTableData(nextProps.record);
    }
  }
  // 查找产品下所有组合key
  findAllKey = (array, arr) => {
    array.forEach((element) => {
      arr.push(element.key);
      if (Array.isArray(element.children) && element.children.length != 0) {
        this.findAllKey(element.children, arr);
      }
    });
  };

  //获取表格数据
  getTableData = (record) => {
    const {
      dispatch,
      relatedPositionM: { columns },
      gzCode,
    } = this.props;
    dispatch({
      type: 'relatedPositionM/getTableDate',
      payload: {
        securitiesCode: record.stockCode?.split('.')[0],
        product: gzCode,
        assetType: record.assetTypeFB,
        exchangeCode: record.exchangeCode,
      },
      callback: (res) => {
        const newColumns = this.changeColumns(columns);
        if (res) {
          this.setState({
            columns: newColumns, // 表格头
            dataSource: res, // 表格数据
          });
        } else {
          this.setState({
            columns: newColumns, // 表格头
            dataSource: [], // 表格数据
          });
        }
      },
    });
  };

  // 改变columns的样式
  changeColumns = (columns) => {
    if (columns.length && columns[columns.length - 1].title != '交易流水') {
      columns.push({
        title: '交易流水',
        dataIndex: 'operate',
        key: 'operate',
        type: 'operate',
        operates: [
          {
            title: '查看',
            onClick: (record) => this.view(record),
          },
        ],
      });
    }
    return columns;
  };

  // 响应查看
  view = (modalData) => {
    this.setState({ visible: true, modalData });
  };

  // 取消
  onCancel = () => {
    this.setState({ visible: false });
  };

  render() {
    const { loading, record } = this.props;
    const { columns, dataSource, visible, modalData, cpCode } = this.state;
    return (
      <div>
        <TableC
          columns={columns || []}
          dataSource={dataSource || []}
          scroll={{ x: 1100, y: 320 }}
          loading={loading.effects['relatedPositionM/getTableDate']}
          rowKey={'key'}
          hidePage={true}
        />
        {visible && <ViewModaC visible={visible} onCancel={this.onCancel} modalData={modalData} cpCode={cpCode} record={record} />}
      </div>
    );
  }
}
export default connect(({ relatedPositionM, loading }) => ({ relatedPositionM, loading }))(RelatedPositionC);
